import React, { useEffect, useState, useRef, useCallback } from 'react';
import { doctormanagement_list, doctormanagement_editlist, doctormanagement_deletelist, doctormanagement_pagelist, doctormanagement_searchlist } from '../../../utils/Hospital Information/api'
import type { ColumnsType } from 'antd/es/table';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { Input, Button, notification, TablePaginationConfig, Tag, Upload, } from 'antd';
import { Form, Modal, Select } from 'antd';
import UserTable from './MyUtils/UserTable';
import { useNavigate } from 'react-router-dom';

import '../../../styles/Hospital Information/Doctormanagement.scss'
import axios from 'axios';
import Index from '../../Index';
const { Search, } = Input;
interface Props {

}

interface DataType {
    name: string;
    head: string;
    yard: string;
    title: string;
    department: string;
    label: string[];
    doctorprofile: string,
    key: number
    src: null
}
interface Item {
    _id: string
    name: string
}

function Doctormanagement(props: Props) {
    var [form] = Form.useForm();
    // 表单中的描述内容区域
    const { TextArea } = Input;
    // 用于路由跳转
    var navigate = useNavigate()
    // 获取医生列表
    var [formlist, setFormlist] = useState([])
    // 获取本行的id修改内容
    var [newid, setNewid] = useState('')

    //决定了每一列渲染什么数据
    const columns: ColumnsType<DataType> = [
        {
            title: '医生姓名', //表格列的名字(显示在表格头上)
            dataIndex: 'name', //数据对应的属性名
            // key: 'id' //key是必须的,每一列不同.
        },
        {
            title: '医生头像',
            dataIndex: 'head',
            render: (record) => (
                <>
                    <img src={record} alt="" style={{ width: 20, height: 20 }} />
                </>
            )
        },
        {
            title: '院区',
            dataIndex: 'yard',
        },
        {
            title: '职称',
            dataIndex: 'title'
        },
        {
            title: '科室',
            dataIndex: 'department',
        },
        {
            title: '标签',
            dataIndex: 'label',
        },
        {
            title: '描述',
            dataIndex: 'doctorprofile',
        },
        {
            title: '操作',
            // key: 'action',
            render: (_, record) => (
                <>
                    <div className="changebox">
                        <EditOutlined onClick={() => { toEdit(record,) }} />
                        <DeleteOutlined onClick={() => { toDel(record,) }} style={{ marginLeft: 20 }} />
                    </div>
                </>
            ),
        },
    ];

    useEffect(() => {
        doctormanagement_list().then((res) => {
            setFormlist(res.data)
        })
    }, [])

    // 按医生姓名搜索
    const onSearch = (value: string) => {
        var seachkey = value
        if (seachkey) {
            doctormanagement_searchlist(seachkey).then((res) => {
                setFormlist(res.data);
                notification.success({ message: '查询成功！' });
            })
        }
    }

    // 点击删除一行内容
    var toDel = (record: any) => {
        var id = record.id
        doctormanagement_deletelist(id).then((res) => {
            doctormanagement_list().then((res) => {
                setFormlist(res.data)
            })
            notification.success({ message: '删除成功！' });
        })
    }

    var [electeds, setElecteds] = useState([])
    // 复选框
    const elected = useCallback((elected: any) => {
        // console.log("复选框", elected);
        setElecteds(elected)
    }, [electeds])

    // 批量删除
    var toAllDel = () => {
        console.log(electeds);
        if (electeds) {
            electeds.map((item) => {
                doctormanagement_deletelist(item).then((res) => {
                    doctormanagement_list().then((res) => {
                        setFormlist(res.data)
                    })
                })
            }
            )
        }

    }

    //分页器
    var [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 })

    //分页
    const page = (page: TablePaginationConfig) => {
        doctormanagement_pagelist(page).then((res) => {
        })
    }

    // 去新增医生页面
    var toAddNewDoctor = () => {
        navigate('/index/hospitalinformation/addnewdoctor');
    }

    // 上传状态发生改变回调
    var handleUploadChange = (res: any) => {
        if (res.file.status == 'done' && res.file.response.code == 200) { //上传成功
            notification.success({ message: '上传成功!' });
        }
    }

    // 编辑的时候
    const [isModalOpenedit, setIsModalOpenedit] = useState(false);
    const showModaledit = () => {
        setIsModalOpenedit(true);
    };
    const handleOkedit = () => {
        setIsModalOpenedit(false);
    };
    const handleCanceledit = () => {
        setIsModalOpenedit(false);
    };
    // 点击编辑
    const toEdit = (record: any) => {
        showModaledit();
        form.setFieldsValue(record)
        setNewid(record.id)
    }

    // 编辑表单提交
    const onFinishedit = (values: any) => {
        console.log(values);
        doctormanagement_editlist(newid, {
            name: values.name,
            head: "https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669827600&t=965454cbee8e8e86d48619d8b8e8933a",
            yard: values.yard,
            title: values.title,
            department: values.department,
            label: [
                "糖尿病",
                "尿毒症",
                "肾病"
            ],
            doctorprofile: values.doctorprofile,
        }).then((res) => {
            doctormanagement_list().then((res) => {
                setFormlist(res.data)
            })
            notification.success({ message: '修改成功！' });
        })
    }
    return (
        <div className='doctormanagement'>
            <div className="head">
                <div className="opet">
                    <p>医生管理</p>
                </div>
                <div className="opet2">
                    <Upload accept='.xls,.xlsx' action='/api/custom/import' name="excel" onChange={handleUploadChange} showUploadList={false}>
                        <Button type='primary' style={{ marginRight: 10 }}>导入</Button>
                    </Upload>
                    <Button type='primary' disabled={electeds.length == 0} href='/api/custom/export'>导出</Button>

                    <Button type='primary' disabled={electeds.length == 0} onClick={() => { toAllDel() }}>删除</Button>
                    <Button type='primary' onClick={() => { toAddNewDoctor() }}>新增医生信息</Button>
                </div>
            </div>
            <div className="tablecountent">
                <div className="seach">
                    <Search placeholder="请输入医生姓名" onSearch={onSearch} enterButton style={{ width: 300, marginRight: 20 }} />
                    {/* <Button type="primary" onClick={open}>搜索</Button> */}
                </div>
                <Modal title="编辑医生" footer={[]} open={isModalOpenedit} onOk={handleOkedit} onCancel={handleCanceledit}>
                    <Form
                        name="basic"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        onFinish={onFinishedit}
                        form={form}

                    >
                        <Form.Item label="医生姓名" name="name">
                            <Input placeholder='请输入内容' />
                        </Form.Item>
                        <Form.Item label="请选择院区" name="yard">
                            <Select>
                                <Select.Option value="东院区">东院区</Select.Option>
                                <Select.Option value="北院区">北院区</Select.Option>
                                <Select.Option value="湘南院区">湘南院区</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="请选择科室" name="department">
                            <Select>
                                <Select.Option value="内科">内科</Select.Option>
                                <Select.Option value="外科">外科</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="请选择医生职称" name="title">
                            <Select>
                                <Select.Option value="主任医师">主任医师</Select.Option>
                                <Select.Option value="副主任医师">副主任医师</Select.Option>
                                <Select.Option value="主治医师">主治医师</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="医生标签" name="lables">
                            <Select>
                                <Select.Option value="肝功能">肝功能</Select.Option>
                                <Select.Option value="肾功能">肾功能</Select.Option>
                                <Select.Option value="心脑血管">心脑血管</Select.Option>
                                <Select.Option value="泌尿学科">泌尿学科</Select.Option>
                                <Select.Option value="心脏病">心脏病</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="医生简介" name="doctorprofile">
                            <TextArea rows={4} placeholder="请输入内容" />
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                确定
                            </Button>
                            <Button style={{ marginLeft: 20 }} onClick={() => { handleCanceledit() }}>
                                取消
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
                {/* <UserTable ref={childref} header={columns} formlist={formlist} /> */}
                <UserTable page={page} elected={elected} header={columns} formlist={formlist} />
            </div>
        </div>
    );
}

export default Doctormanagement;